<template>
  <div v-if="isShowToast" :style="{width:`${finalToastWidth}px`,'min-height':`${finalToastHeight}px`,bottom:`${finalPosition}`}" class="toast-box">
      <div v-if="toastShape=='square'" :class="finalIcon"></div>
      <span class="text">{{content}}</span>
  </div>
</template>
<script>
export default {
  name:"toast",
  props:{
      content:{
          type:String,
          default:"请稍等"
      },
      toastWidth:{
          type:Number,
          default:150
      },
      toastShape:{
          type:String,
          default:"rect"
      },
      toastPosition:{
          type:String,
          default:"bottom"
      },
      iconType:{
          type:String,
          default:"success"
      },
      isShowToast:{
          type:Boolean,
          default:false
      },
      time:{
          type:Number,
          default:1500
      }
  },
  computed:{
    finalToastWidth(){
        return this.toastWidth>149?150:(this.toastWidth<99?100:this.toastWidth)
    },
    finalToastHeight(){
        if(this.toastShape=="rect"){
            return 42
        }else{
            return this.toastWidth>149?150:(this.toastWidth<99?100:this.toastWidth)
        }
    },
    finalIcon(){
        switch(this.iconType){
            case "success":
                return "iconfont icon-success";
                break;
            case "fail":
                return "iconfont icon-fail";
                break;
            case "warn":
                return "iconfont icon-warn";
                break;
            case "none":
                return "";
                break;
        }
    },
    finalPosition(){
        if(!isNaN(this.toastPosition)){
            return this.toastPosition>80?`80%`:(this.toastPosition<10?'10%':`${this.toastPosition}%`)
        }else{
            switch(this.toastPosition){
                case "top":
                    return "80%";
                    break;
                case "center":
                    return "50%";
                    break;
                case "bottom":
                    return "10%";
                    break;
                default:
                    return "10%";
                    break;
            }
        }
        
    }
  }
}
</script>
<style lang="less" scoped>
.toast-box{
    position: fixed;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    border-radius: 4px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    z-index: 99999;
    padding: .5rem;
    box-sizing: border-box;
    .iconfont{
        font-size: 1.2rem;
        flex-basis: 50%;
        &.icon-success{
            color: rgb(24, 228, 24);
        }
    }
    .text{
        font-size: .7rem;
    }
}
</style>


